<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/admin/commons/taglib.jsp"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>后台管理</title>
    <s:include value="/layouts/kindEditor.jsp"></s:include>
    <script type="text/javascript">
        $(function(){
            $("#timu").addClass("active");
            $("#timu").find("ul li").eq(2).addClass("active");
        })
        //切换题目类型（听力，阅读），改变相应的选项
        function changeQuestionType(){
            var type = $('#questionTypeSelect option:selected').val();
            $('#source'+type).show();
            if(type==1){
                $('#source2').hide();
            }else {
                $('#source1').hide();
            }
        }
        //增加题目
        var i = 1;
        function addTimu() {
            var obj = $('#timuPanel'+i).clone();
            $(obj).attr('id','timuPanel'+(i+1));//修改panel的id
            $(obj).find('label').eq(0).html("题目"+(i+1));//修改题目标题提示
            $(obj).find('input').eq(0).attr('name','tiMuList['+i+'].question');//修改题目标题name
            $(obj).find('input').last().attr('name','tiMuList['+i+'].answer');//修改题目答案name

            $('#timuPanel'+i).after(obj);
            i++;
            //清除数据
            var inputs = $('#timuPanel'+i).find("input");
            for(var a=0;a<inputs.length;a++){
                $(inputs[a]).val('');
            }
        }
        //删除题目
        function deleteTimu(obj){
            var parentObj = $(obj).parent().parent().parent();
            var objId=$(parentObj).attr("id");
            if(objId=="timuPanel1"){
                alertDiv("操作无效！");
            }else if(objId.substring(9,objId.length)*1!=i){
                alertDiv("删除顺序错误");
            }else{
                $(parentObj).remove();
                i--;
            }
        }
    </script>
</head>
<body>
    <div class="admin">
        <div class="panel">
            <div class="panel-head"><strong>添加试题</strong></div>
            <div class="panel-body">
                <form action="timu!save.action" id="form" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="tmSource.id" value="${tmSource.id}"/>

                    <div class="form-group">
                        <div class="label"><label for="name">大题标题</label></div>
                        <div class="field">
                            <input type="text" class="input" id="name" name="tmSource.name" size="50" placeholder="请输入标题"
                                   data-validate="required:请输入标题" value="${tmSource.name}"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="label"><label >试题分类</label></div>
                        <select  class="border radius" style="width:100%;height:35px;"  name="tmSource.type">
                            <option value="1">首测试题</option>
                            <option value="2" <s:if test="tmSource.type==2">selected="selected"</s:if>>周测试题</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="label"><label >题目类型</label></div>
                        <select id="questionTypeSelect" class="border radius" style="width:100%;height:35px;"  name="tmSource.questionType" onchange="changeQuestionType();">
                            <option value="2" <s:if test="tmSource.questionType==2">selected="selected"</s:if>>阅读选择题</option>
                            <option value="1">听力选择题</option>
                        </select>
                    </div>

                    <div class="form-group" id="source1" style="display: none">
                        <div class="label"><label >听力材料</label></div>
                        <div class="field">
                            <a class="button input-file" href="javascript:void(0);">+ 浏览文件<input size="100" type="file"
                                                                                                 name="file" data-validate="required:请选择上传文件,regexp#.+.(mp3)$:只能上传mp3格式文件"/></a>
                        </div>
                    </div>

                    <div class="form-group" id="source2" >
                        <div class="label"><label >阅读材料</label></div>
                        <div class="field">
                            <textarea id="kindEditor" name="tmSource.content" class="input" rows="20" cols="50"></textarea>
                        </div>
                    </div>

                    <div id="timuPanel1" class="panel" style="padding: 10px 20px;margin: 5px 0;">
                        <div class="form-group">
                            <div class="label" ><label class="title">题目1</label>
                                <span style="border: 1px solid red;float: right;padding: 5px 10px;color: red;border-radius: 5px;cursor: pointer"
                                onclick="deleteTimu(this);">删除</span>
                            </div>
                            <div class="field">
                                <input type="text" class="input"  name="tiMuList[0].question" size="50" placeholder="请输入标题"
                                       data-validate="required:请输入问题" value="${timu.question}"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="label"><label >选项</label></div>

                            <div class="field" style="width: 49.5%;float: left;">
                                <input type="text" class="input"  name="optionContent" size="50" placeholder="请输入A选项"
                                       data-validate="required:请输入A选项" value=""/>
                            </div>
                            <div class="field" style="width: 49.5%;float: left;margin-left: 1%">
                                <input type="text" class="input"  name="optionContent" size="50" placeholder="请输入B选项"
                                       data-validate="required:请输入B选项" value=""/>
                            </div>
                            <div style="clear: both"></div></br>
                            <div class="field" style="width: 49.5%;float: left;">
                                <input type="text" class="input"  name="optionContent" size="50" placeholder="请输入C选项"
                                       data-validate="required:请输入C选项" value=""/>
                            </div>
                            <div class="field" style="width: 49.5%;float: left;margin-left: 1%">
                                <input type="text" class="input"  name="optionContent" size="50" placeholder="请输入D选项"
                                       data-validate="required:请输入D选项" value=""/>
                            </div>
                        </div>

                        <div style="clear: both;height: 5px;"></div>
                        <div class="form-group">
                            <div class="label"><label >正确答案</label></div>
                            <div class="field">
                                <input type="text" class="data-validateinput" name="tiMuList[0].answer" size="50" placeholder="请输入答案"
                                       data-validate="required:请输入答案,regexp#.+.(A|B|C|D|a|b|c|d)$:只能ABCD大小写字母" value="${timu.answer}"/>
                            </div>
                        </div>
                    </div>

                    <div style="clear: both;height: 10px;"></div>
                    <input type="button" class="button bg-green" onclick="addTimu();" value="增加题目"/>
                    <button class="button bg-blue" onclick="return submit()">提交</button>
                </form>
            </div>
        </div>
    </div>
<script>
    function submit(){
        var type = $('#questionTypeSelect option:selected').val();
        if(type==1){
            $('#source2').remove();
            return true;
        }else {
            $('#source1').remove();
            var value =editor.html();//获取文本域的值。
            if(value!=''){
                return true;
            }else {
                alert();
            }
        }
    }
</script>
</body>
</html>

